<script lang="ts">
import { defineComponent, reactive, ref } from "vue";

import { getAtlasReportDetail } from "@/api/atals/index";

interface FormModule {
  name: string | undefined;
  time: string | undefined;
  unit: string | undefined;
  message: string | undefined;
}

export default defineComponent({
  setup(props, { emit, expose }) {
    const formInline = reactive<FormModule>({
      name: undefined,
      time: undefined,
      unit: undefined,
      message: undefined,
    });

    const isShow = ref(false);

    const open = (id: string) => {
      console.log("弹窗详情", id);
      getAtlasReportDetail(id).then((res) => {
        if (res.data.state == "success") {
          let { Id, name, providerName, updateTime, remark } = res.data.data[0];
          formInline.time = Id;
          formInline.name = name;
          formInline.unit = providerName;
          formInline.time = updateTime;
          formInline.message = remark;
          console.log(formInline);
          
        }
      });
      isShow.value = true;
    };
    const close = () => {
      isShow.value = false;
    };

    expose({
      open,
    });

    return {
      formInline,
      isShow,
      close,
    };
  },
});
</script>

<template>
  <el-dialog v-model="isShow" title="详细信息" width="40%" @close="close">
    <div class="tc-body">
      <el-form :model="formInline" size="mini" disabled>
        <el-form-item label="文件名称:">
          <el-input v-model="formInline.name"></el-input>
        </el-form-item>
        <el-form-item label="更新时间:">
          <el-date-picker
            v-model="formInline.time"
            type="date"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="提供单位:">
          <el-input v-model="formInline.unit"></el-input>
        </el-form-item>
        <el-form-item label="摘要信息:">
          <el-input
            v-model="formInline.message"
            :rows="5"
            type="textarea"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>
